<template>
  <el-dialog
    :visible.sync="visible"
    :title="roomId == '' ? '批量定价' : '复制房间'"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :width="roomId == '' ? '50%' : '30%'"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
    >
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="选择房型" prop="houseBaseIdList">
            <el-select
              v-model="dataForm.houseBaseIdList"
              placeholder="房型"
              clearable
              multiple
              collapse-tags
              style="width: 56.7%"
            >
              <el-option
                :value="item.houseBaseId"
                v-for="item in roomType"
                :key="item.houseBaseId"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="roomId == ''">
          <el-col :span="24">
            <el-form-item label="选择时间" prop="rentDateStart">
              <el-date-picker
                v-model="dataForm.rentDateStart"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
              <span>至</span>
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="dataForm.rentDateEnd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="每天价格" prop="priceType">
              <el-radio-group v-model="dataForm.priceType" style="width: 300px">
                <el-radio label="1">固定设置</el-radio>
                <el-radio label="2">按天设置</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <template v-if="dataForm.priceType == '2'">
            <el-col :span="12">
              <el-form-item label="周日-周四" prop="sunToThursdayPrice">
                <el-input
                  v-model="dataForm.sunToThursdayPrice"
                  type="number"
                  placeholder="￥价格"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周五-周六" prop="friToSatdayPrice">
                <el-input
                  v-model="dataForm.friToSatdayPrice"
                  type="number"
                  placeholder="￥价格"
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="dataForm.priceType == '1'">
            <el-col :span="24">
              <el-form-item label="价格" prop="price">
                <el-input v-model="dataForm.price"></el-input>
              </el-form-item>
            </el-col>
          </template>
        </template>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      flag: false,
      visible: false,
      roomType: [],
      roomId: "",
      dataForm: {
        priceType: "",
        homestayId: this.$store.state.user.homestayId,
        houseBaseIdList: [],
        price: 0,
        rentDateEnd: "",
        rentDateStart: "",
        sunToThursdayPrice: "",
        friToSatdayPrice: "",
      },
    };
  },
  computed: {
    dataRule() {
      return {
        rentDateStart: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        rentDateEnd: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  props: ["ids"],
  methods: {
    init() {
      this.visible = true;
      if (this.ids) {
        this.roomId = this.ids; //复制房间
      } else {
        this.roomId = ""; //批量定价
      }

      this.getRoomType();
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          // this.getInfo();
        }
      });
    },
    //获取房型
    getRoomType() {
      this.$http
        .get("/hotel/house/base/getHouseSearchBox/" + this.dataForm.homestayId)
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.roomType = res.data;
          }
        });
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          if (!this.flag) {
            this.flag = true;
          } else {
            return;
          }
          let url = "";
          let sendData = {};
          if (this.roomId == "") {
            url = "/hotel/house/room/batchDefineRoomPrice";

            if (this.dataForm.priceType == "2") {
              this.dataForm.price = null;
            } else {
              this.dataForm.sunToThursdayPrice = "";
              this.dataForm.friToSatdayPrice = "";
            }
            sendData = this.dataForm;
          } else {
            url = "/hotel/house/base/houseCopy";
            sendData = {
              houseBaseId: this.roomId,
              houseBaseIdList: this.dataForm.houseBaseIdList,
            };
          }

          this.$http
            .post(url, sendData)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                this.flag = false;
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.flag = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style scoped lang="scss">
</style>
